<template>
  <div>
    count {{count3}} {{count4(300)}}
    <Child></Child>
    <div>
      <button @click="add"> + </button>
    </div>
  </div>
</template>

<script>
import Child from './Child'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { ADDCOUNT } from '../store/mutation-types'
export default {
  data() {
    return {
      num: 10000
    }
  },
  components: {
    Child
  },

  // data() {
  //   return {
  //     count: 100
  //   }
  // },
  // computed: {
  //   count() {
  //     return this.$store.state.count
  //   }
  // },

  computed: {
    ...mapState({
      count2: 'count'
    }),
    ...mapGetters(['count3', 'count4'])
    // count3() {
    //   return this.$store.getters.count3
    // }
  },

  mounted() {
    // this.count = this.$store.state.count
    // this.$store.state.count = 100
  },

  //methods: {
    // handleAddClick() {
    //   setTimeout(() => {
    //     // commit: 人工
    //     this.$store.commit('setCount', 100)
    //   }, 1000)
    //   // dispatch: 人工
    //   this.$store.dispatch('add', 100)
    // }
  //}

  methods: {
    ...mapMutations({
      setCount: ADDCOUNT
    }),
    ...mapActions({
      add() {
        const result = this.$store.dispatch('add', 100)
        result.then(() => {
          console.log(0)
        })
      }
    })
  }
}
</script>

<style lang='stylus' scoped>

</style>